<template>
  <div class="dialog">
    <el-dialog width="70%" title="选择店铺" :visible="true" :close-on-click-modal="false" :before-close="close">
      <el-tree
        ref="tree"
        class="shop-tree"
        default-expand-all
        :data="shopList"
        show-checkbox
        check-strictly
        node-key="value"
      />
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getShopList } from '@/api/ticket'
import { mapGetters } from 'vuex'

export default {
  name: 'AddShop',
  components: {},
  props: {
    shopType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      loading: false,
      shopList: []
    }
  },

  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ])
  },

  created() {
    this.getShopList()
  },

  methods: {

    getShopList() {
      const data = {
        ticketPackageType: this.shopType
      }
      getShopList(data).then(res => {
        (res || []).map(item => {
          item.label = item.enterpriseName
          item.value = item.id
          item.children = item.shopRespList || []
          item.children.map(shopItem => {
            shopItem.label = shopItem.shopName
            shopItem.value = shopItem.shopId
          })
        })
        this.shopList = res || []
      }).catch(() => {})
    },

    // 取消
    close() {
      this.$emit('close')
    },

    // 确认
    confirm() {
      const selectShopList = []
      const result = this.$refs.tree.getCheckedKeys()
      this.shopList.map(item => {
        item.children.map(shopItem => {
          if (result.includes(shopItem.shopId)) {
            selectShopList.push(shopItem)
          }
        })
      })
      if (selectShopList.length > 0) {
        this.$emit('confirm', selectShopList)
      } else {
        this.$message.error('请选择店铺')
      }
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .shop-tree > .el-tree-node > .el-tree-node__content .el-checkbox {
  display: none;
}
::v-deep .el-dialog__body{
  padding: 10px 20px;
}
</style>
